<template>
    <div>
		<el-dialog v-model="showView" title="产品列表" width="800" :before-close="handleClose">
			<el-form ref="formRef" class="mb-[16px]" :model="queryParams" :inline="true" label-width="80px">
				<el-form-item label="银行">
					<el-select class="w-[220px]" v-model="queryParams.bank_code" placeholder="请选择" clearable filterable >
						<el-option v-for="item in optionsData.bank_list" :key="item.bank_code" :label="item.name" :value="item.bank_code" />
					</el-select>
				</el-form-item>
				<el-form-item label="所属城市">
					<el-select-v2
						v-model="queryParams.area_id"
						filterable
						clearable
						:options="optionCity"
						placeholder="请选择"
						class="w-[220px]"
						:height="280"
					/>
				</el-form-item>
				<el-form-item label="名称">
					<el-input class="w-[220px]" v-model="queryParams.name" clearable />
				</el-form-item> 
				<el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
			</el-form>
			<el-table size="small" v-loading="pager.loading" :data="pager.lists">
				<el-table-column type="index" label="序号" min-width="60" :index="indexAdd"/>
				<el-table-column label="所属城市" prop="area_id" min-width="110" >
					<template #default="{ row }">
            			<span v-if="row.is_nationwide">全国</span>
						<span v-else-if="row.area_id" v-city="row.area_id"></span>
						<span v-else>平台</span>
					</template>
				</el-table-column>
				<el-table-column label="银行" prop="bank_name" min-width="190" /> 
				<el-table-column label="产品名称" min-width="160" prop="name"/>
				<el-table-column label="产品logo" min-width="100" prop="attach_urls">
                    <template #default="{ row }">
						<image-contain v-if="row.logo" :src="row.logo" :width="60" :height="45" :preview-src-list="[row.logo]" preview-teleported fit="contain" />
					</template>
                </el-table-column>
				<el-table-column label="操作" min-width="130">
					<template #default="{ row }">
						<el-button size="small" v-perms="['user.group/saveGroup']" type="primary" @click="onAdmin(row)">选择</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
	import {productLists} from '@/api/product/product';
	import {getBankList} from "@/api/app";
	import { usePaging } from '@/hooks/usePaging';
	import {useDictOptions} from "@/hooks/useDictOptions";
	import useAppStore from '@/stores/modules/app'
	const useApp = useAppStore()
	const optionCity:any = useApp.optionCity;
	const showView = ref(false);
	const {optionsData} = useDictOptions<{
		bank_list: any[]
	}>({
	bank_list: {
		api: getBankList
	}
	})
	let queryParams:any = reactive({
		bank_code: '',
		area_id: '',
		name: ''
	});
	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: productLists,
		params: queryParams,
		size: 10
	})
	const emit = defineEmits(['backAdmin','backClose'])
	const onAdmin = (row: any) => {
		emit('backAdmin', row)
		showView.value = false;
	}

	const init =  () => {
		showView.value = true;
		getLists()
	} 

	const handleClose = () => {
		emit('backClose', '')
		showView.value = false;
	}
	defineExpose({
		init,
	})
	
</script>
